
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                // 使用多个loader处理用use
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 老版本图片资源处理, 现不需要这个也可以自动加载图片文件
            {
                test: /\.(jpg|png|gif)$/,
                // 使用一个用loader 
                // 下载url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb， 就会被base64处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会变大（文件请求会变慢）
                    limit: 8 * 1024,
                    // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs 解析时会出现问题：[pbject Module]
                    // 解决：关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,
                    // 给图片进行重命名 hash值前10位
                    name: '[hash:10].[ext]',
                },
                // webpack5.0需要加这个才能正常使用url-loader
                type: 'javascript/auto',
            },
            // 默认处理不了html中img图片
            {
                test: /\.html$/,
                // 处理html文件的img图片 （负责引入，从而能被url-loader进行处理）
                loader: 'html-loader',
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}